<template>
  <div>
    <div id="candlestick" style="width: 500px; height: 200px">基础K线图</div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {};
  },
  mounted() {
    var candlestick = echarts.init(document.getElementById("candlestick"));
    var candlestickOption = {
      title: {
        //设置图表的标题
        text: "基础K线图",
        left: "center",
      },
      xAxis: {
        data: ["2017-10-24", "2017-10-25", "2017-10-26", "2017-10-27"],
      },
      yAxis: {},
      series: [
        {
          type: "candlestick",
          data: [
            [20, 34, 10, 38],
            [40, 35, 30, 50],
            [31, 38, 33, 44],
            [38, 15, 5, 42],
          ],
        },
      ],
    };
    candlestick.setOption(candlestickOption);

  },
};
</script>
<style lang='less' scoped>
</style>